<!-- @format -->

<template>
	<transition :name="transition">
		<div class="calendar-tz" v-if="isShow" :class="isFixed && 'fixed'">
			<slot name="header"></slot>
			<view class="title-view" v-if="isShowTitle">
				<view class="title-text">请选择时间</view>
				<view class="title-btn" :class="{ disable: sureDisable }" @click="onSure" v-if="mode == 2"
				:data-spmCntSuffix="'.titleBtn.time@1.onSure@'"
				:data-custom="1"
				:data-spm="{'pos': '确认'}"
				>确定</view>
			</view>
			<div class="week-number">
				<span v-for="(item, index) in weekList" :style="{
					color: (index == 0 || index == weekList.length - 1) && themeColor
				}" :key="index">{{ item }}</span>
			</div>
			<view class="line-view"></view>
			<p class="tips" v-if="title">{{ title }}</p>
			<div class="content" id="scrollWrap">
				<div class="con" v-for="(item, index) in calendar" :key="index" :id="item.year + '' + item.month">
					<h3 v-text="item.year + '年' + item.month + '月'"></h3>
					<span class="month-bg" :style="{ color: getBetweenColor }">{{ item.month }}</span>
					<ul class="each-month">
						<li class="each-day" v-for="(day, idx) in item.dayList" :key="idx"
							:class="[addClassBg(day, item.month, item.year)]"  @click="chooseDate(day, item.month, item.year)"
							:data-spmCntSuffix="'.eachDay@1.chooseDate@'"
							:data-custom="idx"
							:data-spm="{'pos': day}">
							<div :class="[addClassName(day, item.month, item.year)]"
								:style="{ background: themeBg(day, item.month, item.year) }">
								<p class="day-tip" :style="{ color: themeColor }"><i
										v-text="setTip(day, item.month, item.year, 1)"></i></p>
								<p class="day">{{ day ? day : "" }}</p>
								<p class="recent" style="color: #202020">
									<i v-text="setPrice(day, item.month, item.year)"></i>
								</p>
								<p class="recent">
									<i v-text="setTip(day, item.month, item.year, 2)"></i>
								</p>
							</div>
						</li>
					</ul>
				</div>
			</div>
			<!-- <view class="sure-button-box" >
				<view @click="onSure" v-if="mode == 2" class="sure-button" 
				:style="{
					'background':themeColor
				}" 
			:class="{ disable: sureDisable }">确定</view>
			</view> -->
			<slot name="footer"></slot>
		</div>
	</transition>
</template>

<script>
export default {
	props: {
		isShow: {
			//是否显示
			type: [Boolean],
			default() {
				return false
			}
		},
		isShowTitle: {
			//是否显示标题
			type: [Boolean],
			default() {
				return true
			}
		},
		isFixed: {
			//是否定位全屏
			type: [Boolean],
			default() {
				return true
			}
		},
		transition: {
			//动画类型slide
			type: [String],
			default() {
				return ""
			}
		},
		title: {
			//头部的一段文本
			type: [String, Object],
			default() {
				return ""
			}
		},
		mode: {
			//模式：1普通日历，2酒店，3飞机往返
			type: [String, Number],
			default() {
				return 1
			}
		},
		startDate: {
			//开始日期
			type: [String, Object, Date]
		},
		endDate: {
			//结束日期
			type: [String, Object, Date]
		},
		betweenStart: {
			//日历可选范围开始
			type: [String, Object, Date],
			default() {
				return ""
			}
		},
		betweenEnd: {
			//日历可选结束日期 moment().day(90).format('YYYY-MM-DD')
			type: [String, Object, Date],
			default() {
				return ''
			}
		},
		initMonth: {
			//初始化的月数
			type: [String, Number],
			default() {
				return 6
			}
		},
		themeColor: {
			//主题色
			type: [String],
			default: "#1C75FF"
		},
		priceDate: {
			//日历价 日期对象
			// {
			// 	price:0, 价格
			// 	canSell:1, 可售状态1可售 0 不可售
			// 	currency:'￥',价格标识
			// 	date:'1970-10-10' 日期格式
			// }
			type: [Array],
			default() {
				return []
			}
		}
	},
	data() {
		return {
			startDates: "",
			endDates: "",
			betweenStarts: "",
			betweenEnds: "",
			calendar: [],
			weekList: ["日", "一", "二", "三", "四", "五", "六"]
		}
	},
	watch: {
		isShow() {
			this.init()
      this.$emit("showChange", this.isShow)
		},
		betweenStart() {
			this.init()
		},
		betweenEnd() {
			this.init()
		},
		priceDate(value) {
			this.init()
		},
		startDate(value){
			this.init()
		}
	},
	mounted() {
		this.init()
	},
	computed: {
		sureDisable() {
			const startDates = this.startDates
			const endDates = this.endDates
			return startDates == "" || endDates == ""
		},
		//设置主题色入住离开之间的背景色
		getBetweenColor() {
			if (!this.themeColor) return
			var hex = this.themeColor
			if (hex.length == 4) {
				hex = `#${hex[1]}${hex[1]}${hex[2]}${hex[2]}${hex[3]}${hex[3]}`
			}
			var str =
				"rgba(" +
				parseInt("0x" + hex.slice(1, 3)) +
				"," +
				parseInt("0x" + hex.slice(3, 5)) +
				"," +
				parseInt("0x" + hex.slice(5, 7)) +
				",0.1)"
			return str
		}
	},
	methods: {
		init() {
			var date = new Date()
			this.year = date.getFullYear()
			this.month = date.getMonth() + 1
			this.day = date.getDate()
			this.today = new Date(this.year + "/" + this.month + "/" + this.day) * 1
			if (!this.startDate) {
				const year = date.getFullYear(),
					month = date.getMonth() + 1,
					day = date.getDate()
				this.startDates = this.resetTime(year + "/" + month + "/" + day)
				this.startYear = year
				this.startMonth = month
			} else {
				this.startDates = this.resetTime(this.startDate)
				var dd = this.startDate.replace(/-/g, "/").split("/")
				this.startYear = dd[0]
				this.startMonth = dd[1]
			}
			if (!this.endDate) {
				// var temp = this.startDates + 24 * 60 * 60 * 1000;
				// var dateTemp = new Date(temp);
				// const year = dateTemp.getFullYear(),
				//     month = dateTemp.getMonth() + 1,
				//     day = dateTemp.getDate();
				// this.endDates = this.resetTime(year + "/" + month + "/" + day);
				// this.endYear = year;
				// this.endMonth = month;
			} else {
				this.endDates = this.resetTime(this.endDate)
				var dd = this.endDate.replace(/-/g, "/").split("/")
				this.endYear = dd[0]
				this.endMonth = dd[1]
			}
			this.betweenStarts = this.resetTime(this.betweenStart)
			this.betweenEnds = this.resetTime(this.betweenEnd)
			this.createClendar() //创建日历数据
		},
		//创建每个月日历数据，传入月份1号前面用null填充
		createDayList(month, year) {
			const count = this.getDayNum(month, year),
				_week = new Date(year + "/" + month + "/1").getDay()
			let list = [
				1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
				21, 22, 23, 24, 25, 26, 27, 28
			]
			for (let i = 29; i <= count; i++) {
				list.push(i)
			}
			for (let i = 0; i < _week; i++) {
				list.unshift(null)
			}
			return list
		},
		//计算传入月份有多少天
		getDayNum(month, year) {
			let dayNum = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
			if ((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0) {
				dayNum[1] = 29
			}
			return dayNum[month - 1]
		},
		onSure() {
			if (this.mode == 2 && this.startDates && this.endDates) {
				const choose = {
					startStr: this.dateFormat(this.startDates),
					startDate: Date(this.startDates)
				}
				choose.dayCount = (this.endDates - this.startDates) / 24 / 3600 / 1000
				choose.endStr = this.dateFormat(this.endDates)
				choose.endDate = Date(this.endDates)
				this.$emit("callback", choose)
			}
		},
		//根据当天和结束日期创建日历数据
		createClendar() {
			var yearTemp = this.year
			var monthTemp = this.month
			if (!!this.betweenStarts) {
				//如果有范围起始日期，可选范围从betweenStart开始
				yearTemp = new Date(this.betweenStarts).getFullYear()
				monthTemp = new Date(this.betweenStarts).getMonth() + 1
			}
			this.calendar = []
			for (let i = 0; i < this.initMonth; i++) {
				let year = yearTemp
				let month = monthTemp + i
				let _monthData = {
					dayList: [],
					month: "",
					year: ""
				}
				var m = Math.ceil(month / 12)
				if (m > 0) {
					year += m - 1
				} else {
					year += m - 1
				}
				if (month > 12) {
					month = month % 12 == 0 ? 12 : month % 12
				}
				if (month <= 0) {
					month = 12 + (month % 12)
				}
				_monthData.year = year
				_monthData.month = month
				_monthData.dayList = this.createDayList(month, year)
				this.calendar.push(_monthData)
			}
			// console.log(this.calendar,'日历')
			//h5默认页面加载到当前日期start-date的位置
			if (document) {
				this.scrollTop(this.startYear, this.startMonth)
			}
		},
		scrollTop(year, month) {
			var id = year + "" + parseInt(month)
			setTimeout(() => {
				var obj = document.getElementById(id)
				if (!obj) return
				var wrap = document.getElementById("scrollWrap")
				wrap.scrollTop = obj.offsetTop - 40
			}, 0)
		},
		//添加日历样式
		addClassName(day, month, year) {
			if (!day) return
			const _date = new Date(year + "/" + month + "/" + day)
			let className = []
			// if (_date.getDay() == 0 || _date.getDay() == 6) { //周末或周六样式
			//     className.push('weekend')
			// }
			const monthTxt = month > 9 ? month : `0${month}`
			const dayTxt = day > 9 ? day : `0${day}`
			const choseDate = `${year}-${monthTxt}-${dayTxt}`
			for(var i = 0; i<this.priceDate.length;i++){
				if((this.priceDate[i].date == choseDate && (this.priceDate[i].price <= 0 || this.priceDate[i].canSell == 0))){
					className.push("disabled")
				}
				// if(this.priceDate[i].canSell == 0){
				// 	className.push("disabled")
				// }
			}
			if (_date * 1 == this.today) {
				className.push("today")
			}
			if (this.mode == 1) {
				if (_date * 1 == this.startDates) {
					className.push("trip-time")
				}
			} else {
				if (_date * 1 == this.startDates || _date * 1 == this.endDates) {
					className.push("trip-time")
				}
			}
			if (this.betweenStarts) {
				_date * 1 < this.betweenStarts && className.push("disabled")
			} else {
				_date * 1 < this.today && className.push("disabled") //当天和结束日期之外不可选
			}
			_date * 1 > this.betweenEnds && className.push("disabled")
			return className.join(" ")
		},
		//入住离开的区间背景色
		addClassBg(day, month, year) {
			if (!day) return
			const _date = this.resetTime(year + "/" + month + "/" + day)
			let className = []
			if (_date >= this.startDates && _date <= this.endDates && this.mode > 1) {
				className.push("between")
			}
			return className.join(" ")
		},
		//theme入住离开的区间背景色
		themeOpacityBg(day, month, year) {
			if (!this.themeColor) return
			if (!day) return
			const _date = this.resetTime(year + "/" + month + "/" + day)
			if (_date >= this.startDates && _date <= this.endDates && this.mode > 1) {
				return this.getBetweenColor
			}
		},
		//theme获取普通日期选中样式背景
		themeBg(day, month, year) {
			if (!this.themeColor) return
			const _date = this.resetTime(year + "/" + month + "/" + day)
			//正常模式
			if (this.mode == 1) {
				if (_date == this.startDates) {
					return this.themeColor
				}
			} else {
				//酒店和往返模式
				if (_date == this.startDates || _date == this.endDates) {
					return this.themeColor
				}
			}
		},
		//清除时间 时 分 秒 毫秒
		resetTime(dateStr) {
			var date = new Date(dateStr.replace(/-/g, "/"))
			date.setHours(0)
			date.setMinutes(0)
			date.setSeconds(0)
			date.setMilliseconds(0)
			return date * 1
		},
		//日历价
		setPrice(day, month, year) {
			if (!day) return
			let d = day + 1 <= 10 ? "0" + day : day
			let mm = month + 1 <= 10 ? "0" + month : month
			let date = `${year}-${mm}-${d}`
			let arr = this.priceDate
			var tip = ""
			for (var i = 0; i < arr.length; i++) {
				if (date == arr[i].date) {
					if (arr[i].price) {
						tip = `${arr[i].currency}${arr[i].price}`
					} 
					if (!arr[i].price) {
						tip = `暂无报价`
					}
					if(!arr[i].canSell){
						tip = `不可售`
					}
				}
			}
			return tip
		},
		//flag==1（返回今天，明天，后天)，flag==2（返回入住，离开，去返)
		setTip(day, month, year, flag) {
			if (!day) return
			var tip = ""
			var _date = this.resetTime(year + "/" + month + "/" + day)
			if (flag == 1) {
				if (_date == this.today) {
					tip = "今天"
				} else if (_date - this.today == 24 * 3600 * 1000) {
					tip = "明天"
				} else if (_date - this.today == 2 * 24 * 3600 * 1000) {
					tip = "后天"
				}
				return tip
			} else {
				if (this.mode == 2) {
					if (_date == this.endDates) {
						tip = "离开"
					} else if (_date == this.startDates) {
						tip = "入住"
					}
				} else if (this.mode == 3) {
					if (_date == this.startDates && !this.endDates) {
						tip = "去/返"
					} else {
						if (_date == this.endDates) {
							tip = "返程"
						} else if (_date == this.startDates) {
							tip = "去程"
						}
					}
				}
				return tip
			}
		},
		//是否是选中当天，或者入住离开当天
		isCurrent(day, month, year) {
			if (!day) {
				return false
			}
			const _date = this.resetTime(year + "/" + month + "/" + day)
			//正常模式
			if (this.mode == 1) {
				if (_date == this.startDates) {
					return true
				}
			} else {
				//酒店和往返模式
				if (_date == this.startDates || _date == this.endDates) {
					return true
				}
			}
		},
		dateFormat(times) {
			let date = new Date(times)
			let recent = ""
			if (times == this.today) {
				recent = "今天"
			} else if (times - this.today === 24 * 3600 * 1000) {
				recent = "明天"
			} else if (times - this.today === 2 * 24 * 3600 * 1000) {
				recent = "后天"
			}
			var year = date.getFullYear()
			var month =
				parseInt(date.getMonth() + 1) > 9
					? parseInt(date.getMonth() + 1)
					: "0" + parseInt(date.getMonth() + 1)
			var day = date.getDate() > 9 ? date.getDate() : "0" + date.getDate()
			return {
				dateStr: year + "-" + month + "-" + day,
				MMdd: `${month}月${day}日`,
				week: "周" + this.weekList[date.getDay()],
				recent,
				MMddStr: month + "-" + day
			}
		},
		chooseDate(day, month, year) {
			console.log('选择了日期', this.mode)
			const _date = this.resetTime(year + "/" + month + "/" + day)
			const week = this.weekList[new Date(_date).getDay()]
			const monthTxt = month > 9 ? month : `0${month}`
			const dayTxt = day > 9 ? day : `0${day}`
			const choseDate = `${year}-${monthTxt}-${dayTxt}`
			let priceNum = 1
			let canSell = 1
			for(var i = 0; i<this.priceDate.length;i++){
				if(this.priceDate[i].date == choseDate){
					priceNum = this.priceDate[i].price
					canSell = this.priceDate[i].canSell
				}
			}
			//判断日期区域是否可点击
			if (!day) return
			if(!priceNum || !canSell)return
			if (this.betweenStarts) {
				if (_date * 1 < this.betweenStarts) return
			} else {
				if (_date < this.today) return
			}
			if (_date > this.betweenEnds) return
			//判断酒店或者往返模式的选择逻辑
			if (this.startDates && this.endDates && _date > this.endDates) {
				this.startDates = _date
				this.endDates = ""
			} else if (this.endDates && _date > this.endDates) {
				this.endDates = _date
			} else if (_date >= this.startDates && _date <= this.endDates) {
				this.startDates = _date
				this.endDates = ""
			} else if (_date < this.startDates) {
				this.startDates = _date
				this.endDates = ""
			} else if (_date > this.startDates) {
				if (this.mode == 1) {
					this.startDates = _date
				} else {
					this.endDates = _date
				}
			}
			const choose = {
				startStr: this.dateFormat(this.startDates),
				startDate: Date(this.startDates)
			}
			if (this.mode == 1) {
				this.$emit("callback", choose)
			} else if (this.mode == 2 && this.startDates && this.endDates) {
				choose.dayCount = (this.endDates - this.startDates) / 24 / 3600 / 1000
				choose.endStr = this.dateFormat(this.endDates)
				choose.endDate = Date(this.endDates)
				this.$emit("callback", choose)
			} else if (this.mode == 3) {
				if (this.startDates && this.endDates) {
					choose.dayCount = (this.endDates - this.startDates) / 24 / 3600 / 1000
					choose.endStr = this.dateFormat(this.endDates)
					choose.endDate = Date(this.endDates)
				} else if (this.startDates && !this.endDates) {
					choose.dayCount = 0
					choose.endStr = this.dateFormat(this.startDates)
					choose.endDate = Date(this.endDates)
				}
				this.$emit("callback", choose)
			}
		},
	}
}
</script>

<style
 lang="scss"
	scoped>
	.noPrice{

	}
	.calendar-tz {
		width: 100%;
		height: 100vh;
		background: #fff;
		display: -webkit-box;
		display: flex;
		-webkit-flex-direction: column;
		flex-direction: column;
		border-radius: 30rpx 30rpx 0 0;

		&.fixed {
			position: fixed;
			width: 100%;
			height: 100%;
			left: 0;
			// top: 0;
			z-index: 900;
		}
		.title-view {
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 61rpx 0 23rpx 32rpx;
			.title-text {
				width: 160rpx;
				height: 32rpx;
				font-size: 32rpx;
				font-weight: 600;
				color: #131328;
				line-height: 32rpx;
			}
			.title-btn {
				position: absolute;
				top: 48rpx;
				right: 32rpx;
				width: 116rpx;
				height: 60rpx;
				border-radius: 30rpx;
				background: #7696FF;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #ffffff;
			}
			.disable {
				background: #e6e6e6 !important;
			}
		}

		.week-number {
			background: #fff;
			padding: 0 1%;
			/** box-shadow: 0 2px 15px rgba(100, 100, 100, 0.1); **/

			span {
				display: inline-block;
				text-align: center;
				padding: 12px 0;
				font-size: 14px;
				width: 14.28%;

				&:first-child,
				&:last-child {
					color: #1c75ff;
				}
			}
		}

		.line-view {
			width: 750rpx;
			height: 1rpx;
			border: 1rpx solid #E4E4F4;
		}

		.tips {
			padding: 6px 10px;
			background: #fff7dc;
			font-size: 12px;
			color: #9e8052;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.content {
			-webkit-box-flex: 1;
			flex: 1;
			overflow-y: scroll;
			-webkit-overflow-scrolling: touch;

			.con {
				color: #333;
				padding-top: 10px;
				position: relative;

				h3 {
					width: 100%;
					font-weight: normal;
					text-align: center;
					font-size: 16px;
					height: 36rpx;
					font-size: 36rpx;
					font-weight: 500;
					color: #131328;
					line-height: 36rpx;
					text-align: left;
					padding-left: 32rpx;
				}

				.month-bg {
					position: absolute;
					text-align: center;
					opacity: 0.4;
					left: 0;
					right: 0;
					bottom: 0;
					top: 20%;
					font-size: 220px;
					font-weight: bold;
					color: #f8f8f8;
				}

				.each-month {
					display: block;
					width: 98%;
					font-size: 0;
					margin: 0 auto;
					padding-left: 0;
					padding-bottom: 10px;
					.each-day {
						position: relative;
						display: inline-block;
						text-align: center;
						vertical-align: middle;
						width: 14.28%;
						font-size: 16px;
						height: 62px;
						margin: 2px auto;

						div {
							display: inline-block;
							font-size: 14px;
							width: 100%;
							height: 100%;
							justify-content: center;
							display: -webkit-box;
							display: flex;
							-webkit-flex-direction: column;
							flex-direction: column;
							border-radius: 50%;
						}

						&.between {
							background: rgba(229,235,255,0.5);
						}	

						.day {
							font-size: 16px;
						}

						.day-tip,
						.recent {
							font-size: 10px;
							max-height: 14px;

							i {
								font-size: 10px;
							}
						}

						.day-tip {
							max-height: 30px;
							display: flex;
							align-items: center;
							justify-content: center;
						}

						.recent {
							color: #ccc;
						}

						.disabled {
							color: #ccc !important;

							.day-tip {
								color: #ccc !important;
							}
							.recent{
								color: #ccc !important;
							}
						}

						.today {
							background: rgba(100, 100, 100, 0.1);
						}
						.trip-time {
							background: #1c75ff;
							color: #fff !important;

							.recent,
							.day-tip {
								color: #fff !important;
							}
						}

						.weekend {
							color: #1c75ff;
						}
					}
				}
			}
		}

		.sure-button-box {
			display: flex;
			flex-direction: column;
			padding-bottom: env(safe-area-inset-bottom);

			.sure-button {
				border-radius: 50px;
				height: 100rpx;
				margin: 10rpx 50rpx 70rpx 50rpx;
				font-size: 32rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: white;
				display: flex;
				justify-content: center;
				align-items: center;
				background: linear-gradient(132deg, #ff7700 0%, #ff4b10 100%);
			}

			.disable {
				background: #e6e6e6 !important;
			}
		}
	}

	/***右侧进入动画***/
	.slide-enter-active,
	.slide-leave-active {
		-webkit-transition: all 0.2s ease;
		transition: all 0.2s ease;
	}

	.slide-enter,
	.slide-leave-to {
		-webkit-transform: translateX(100%);
		transform: translateX(100%);
	}
</style>
